<template>
	<div class="app">
		<h2>当前计数: {{ counter }}</h2>
		<add-counter @addClick="addClick"></add-counter>
		<sub-counter @subClick="subClick"></sub-counter>
	</div>
</template>

<script>
import AddCounter from './components/AddCounter.vue'
import SubCounter from './components/SubCounter.vue'

export default {
	data() {
		return {
			counter: 0,
		}
	},
	methods: {
		addClick(num) {
			this.counter += num
		},
		subClick(num) {
			console.log('num: ', num)
			this.counter -= num
		},
	},
	components: {
		AddCounter,
		SubCounter,
	},
}
</script>

<style scoped></style>
